<template>
  <div class="search">
    <van-sticky :offset-top="5">
      <van-row type="flex" justify="space-between" class="search-row">
        <van-col
          ><van-icon name="location-o" size="22" class="ic" />
          <span class="city">{{ myCity }}</span></van-col
        >
        <van-col
          ><van-icon
            name="search"
            size="22"
            class="ic"
            @click="$router.push('/search')"
        /></van-col>
      </van-row>
    </van-sticky>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState("user", ["myCity"]),
  },
};
</script>

<style lang="less">
.search-row {
  padding: 0px 10px;
  margin-bottom: 10px;
}
.city {
  color: #666;
  font-size: 16px;
  display: inline-block;
  height: 100%;
  vertical-align: 20%;
}
.search-row .ic {
  height: 100%;
  vertical-align: middle;
}
</style>
